<template>
  <div id="aggregContent">
    <div class="bottom-box">
      <h1 class="con-right-title">
        <i class="fa fa-reply" @click="cancel" v-show="isDisabled"></i>
        聚合内容展示
      </h1>
      <div class="table">
        <!-- 上部搜索条件 -->
        <topSearch :form-inline="formInline" @toSearch="toSearch"></topSearch>
        <div class="table-conBtn">
          <el-button
            v-permission="'wh:system:tagAggreg:export'"
            type="warning"
            @click="exportFile"
          >
            导出
            <i class="el-icon-download el-icon--right"></i>
          </el-button>
          <freshCom @searchList="searchList"></freshCom>
        </div>
        <!-- 表格部分 -->
        <el-table
          :data="tableData"
          stripe
          style="width: 100%"
          @selection-change="handleSelectionChange"
          max-height="490"
          ref="table"
        >
          <el-table-column
            type="selection"
            width="50"
            align="center"
          ></el-table-column>
          <el-table-column type="index" width="50" align="center" label="序号">
            <template slot-scope="scope">
              {{
                scope.$index
                  | filterPage(searchParams.pageNum, searchParams.pageSize)
              }}
            </template>
          </el-table-column>
          <el-table-column label="频道" prop="channel" min-width="60">
            <template slot-scope="scope">
              {{ scope.row.channel | filterName('channelType') }}
            </template>
          </el-table-column>
          <el-table-column
            label="内容"
            prop="content"
            class-name="text-overflow"
            min-width="180"
            align="center"
          >
            <template slot-scope="scope">
              <span
                v-html="filterContent(scope.row.content)"
                @click="showNum(scope.row.detailsContent)"
              >
                {{ scope.row.content }}</span
              >
            </template>
          </el-table-column>
          <el-table-column label="图片" width="140" align="center">
            <template slot-scope="scope">
              <!--图片-->
              <span v-if="!scope.row.videoId">
                <listImgString :imgInfo="scope.row.images"></listImgString>
              </span>
              <!--视频-->
              <span
                v-else
                class="img-box"
                @click="videoPlay(scope.row.videoId)"
              >
                <div class="img-inner-box">
                  <el-image fit="contain" :src="scope.row.images"></el-image>
                </div>
              </span>
            </template>
          </el-table-column>
          <el-table-column label="昵称/大鹏号" min-width="160">
            <template slot-scope="scope">
              <div class="nameDp">
                <div v-if="scope.row.user.userName">
                  {{ scope.row.user.userName }}
                </div>
                <div>{{ scope.row.user.dpAccount }}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            type="success"
            label="学院"
            prop="collegeId"
            width="150"
          >
            <template slot-scope="scope">
              <template
                v-if="scope.row.collegeId && scope.row.collegeId !== 'other'"
              >
                <span class="tag-span primary">
                  {{ scope.row.collegeId | filterName('collegeType') }}</span
                >
              </template>
              <template v-else> -</template>
            </template>
          </el-table-column>
          <el-table-column
            type="success"
            label="展示方式"
            prop="displayRule"
            width="150"
          >
            <template slot-scope="scope">
              <span class="tag-span primary" v-if="scope.row.displayRule">
                {{ displayMode(scope.row.displayRule) }}</span
              >
              <span v-else>-</span>
            </template>
          </el-table-column>
          <el-table-column
            type="success"
            label="用户属性"
            prop="userProperty"
            width="150"
          >
            <template slot-scope="scope">
              <span class="tag-span primary" v-if="scope.row.userProperty">
                {{ scope.row.userProperty === 'VEST' ? '马甲' : '用户' }}</span
              >
              <span v-else>-</span>
            </template>
          </el-table-column>
          <el-table-column label="显性标签" min-width="160">
            <template slot-scope="scope">
              <template v-for="(item, index) in scope.row.labelInfos">
                <el-button
                  class="tag-name"
                  :key="index"
                  size="mini"
                  round
                  v-if="item.labelCategoryProperty === 'SHOW_TAG'"
                  >{{ item.labelName }}</el-button
                >
              </template>
            </template>
          </el-table-column>
          <el-table-column label="隐性标签" min-width="250">
            <template slot-scope="scope">
              <template v-for="(item, index) in scope.row.labelInfos">
                <el-button
                  class="tag-name"
                  :key="index"
                  size="mini"
                  round
                  v-if="item.labelCategoryProperty === 'HIDING_TAG'"
                  >{{ item.labelName }}</el-button
                >
              </template>
            </template>
          </el-table-column>
          <el-table-column label="创建时间" prop="createdDate" width="150">
            <template slot-scope="scope">
              <span v-if="scope.row.createdDate">
                {{ scope.row.createdDate }}</span
              >
              <span v-else>-</span>
            </template>
          </el-table-column>
        </el-table>
        <!--分页组件-只有上一页、下一页-->
        <jobPage
          :searchParams="searchParams"
          :tableData="tableData"
          @changePage="searchList"
        ></jobPage>
        <!-- <pageCom
          :searchParams="searchParams"
          :total="total"
          @searchList="searchList"
        ></pageCom>-->
        <!--查看内容-->
        <showContent
          v-if="dialogData.isShow"
          :dialogData="dialogData"
        ></showContent>
        <!--播放视频组件-->
        <showVideo v-if="videoData.isShow" :video-data="videoData"></showVideo>
      </div>
    </div>
  </div>
</template>

<script>
import topSearch from '@component/contentTags/secondAggregContent/topSearch' // 上部搜索条件
import { contentToStr, getVideoPara } from '@utils/pubFunction'
import showContent from '@component/contentTags/secondAggregContent/showContent'
import { saveScrollMixins } from '@/mixins/saveScroll'
import { getVideoImg } from '@utils/getFaceImg'
import showVideo from '@common/showVideo'
import listImgString from '@common/listImgString' // 视图预览(返回值为字符串结构)-公共组件
import {
  getTagsContentList,
  downUrl
} from '@/api/contentTags/tagsContentMashup'
import jobPage from '@common/jobPage'
export default {
  name: 'show',
  msg: '',
  mixins: [saveScrollMixins],
  components: {
    topSearch,
    showVideo,
    showContent,
    listImgString,
    jobPage
  },
  data() {
    return {
      loading: false,
      total: 0, // 搜索条件
      tableData: [], // 表格数据
      tableTemp: [], // table替代
      tempSize: 0,
      isDisabled: false,
      alldisabled: true, // 公开展示按钮禁用状态
      mdisabled: true, // 仅主页展示按钮禁用状态
      notdisabled: true, // 不通过按钮禁用状态
      formInline: {
        channel: '', // 板块
        collegeId: '', // 选择学院
        dpAccount: '', // 大鹏号
        userAttribute: '', // 用户属性
        property: '', // 标签类型
        labelName: '', // 标签名称
        createTime: [],
        startTime: '',
        endTime: '',
        orderWay: '', // 排序
        operatorUserId: '' // 审核人
      },
      searchParams: {
        pageNum: 1, // 当前页数
        pageSize: 10 // 页面显示条数
      },
      backPage: 'configureLableTags', //返回页面
      multipleSelection: [],
      polivNum: {
        polyvUserId: '',
        polyvSecretKey: ''
      },
      videoData: {
        // 视频播放弹窗
        isShow: false,
        vid: ''
      },
      dialogData: {
        isShow: false,
        content: ''
      },
      collegeList: [],
      powerAry: [] // 可显示的权限
    }
  },
  computed: {
    exLoading() {
      return this.$store.state.exportLoading['tagAgg'] || false
    }
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      if (to.query.from) {
        vm.isDisabled = true
      } else {
        vm.isDisabled = false
      }
    })
    next()
  },
  activated() {
    this.toTableScrollHeight()
  },
  watch: {
    // $route.path改变时，mounted()不执行,通过监听$route.path，执行进入页面方法
    '$route.path': 'init'
  },
  mounted() {
    this.init()
    this.$nextTick(() => {
      setTimeout(() => {
        this.setTableScrollHeight()
      }, 1000)
    })
  },
  methods: {
    /* 获取权限 */
    getPower() {
      let id = this.$route.query.mId
      this.getCurPageMenu(id).then((res) => {
        this.powerAry = res
      })
    },
    /* 进入页面执行的方法 */
    init() {
      if (this.$route.query.from === 'hotTopic') {
        this.formInline.topicId = this.$route.query.id
      } else {
        this.formInline.labelId = this.$route.query.id
      }
      this.searchParams.pageNum = 1
      // 获取权限
      // this.getPower()
      this.searchList()
    },
    /*获取系统配置-保利威视 */
    getPolivNum() {
      let _this = this
      getVideoPara().then(
        (res) => {
          // 接口请求正常
          this.polivNum.polyvUserId = res.polyvUserId
          this.polivNum.polyvSecretKey = res.polyvSecretKey
          let n = 0
          if (!this.tableTemp || this.tableTemp.length === 0) {
            return
          }
          this.tableTemp.forEach((item, index) => {
            _this.getImg(item.videoId, index).then(
              (data) => {
                n++
                _this.setData(n)
              },
              () => {
                n++
                _this.setData(n)
              }
            )
          })
        },
        (res) => {
          // 接口请求不正常正常
          _this.tableData = [..._this.tableTemp]
        }
      )
    },
    /*  符合条件后，给table赋值 */
    setData(n) {
      if (n === this.tempSize) {
        this.loading = false
        this.tableData = [...this.tableTemp]
      }
    },

    /* 获取封面图 */
    getImg(videoId, index) {
      if (!videoId) return Promise.resolve(false)
      let _this = this
      return getVideoImg(videoId, this.polivNum).then(
        (res) => {
          _this.tableTemp[index].images = res
          return Promise.resolve(true)
        },
        (error) => {
          return Promise.reject(error)
        }
      )
    },
    /* 播放视频 */
    videoPlay(vid) {
      if (!vid) {
        this.$message.warning('无视频资源！')
        return
      }
      this.videoData.vid = vid
      this.videoData.isShow = true
    },
    /* 获取列表 */
    searchList() {
      this.loading = true
      const params = {}
      // 非空判断，只传有值的字段
      Object.keys(this.formInline).forEach((key) => {
        if (this.formInline[key] !== '') {
          params[key] = this.formInline[key]
        }
      })
      let obj = Object.assign({}, this.searchParams, params)
      delete obj.createTime
      getTagsContentList(obj, (response) => {
        this.tableTemp = response.rows
        this.tableData = response.rows
        this.tempSize = response.rows.length
        this.total = response.total
        this.getPolivNum()
      })
    },
    // 返回按钮
    cancel() {
      // let query = {
      //   mId: this.$route.query.mId,
      //   labelPrope: this.$route.query.labelPrope,
      //   labelCategory: this.$route.query.labelCategoryName
      // }
      // let params = ''
      // if (this.$route.query.pId) {
      //   params = {
      //     id: this.$route.query.pId
      //   }
      // }
      // let backPage = this.$route.query.from
      // this.$router.push({ name: backPage, params, query: query })
      // console.log(this.$router.query.labelProperty)
      this.$router.go(-1)
    },
    // table选择
    handleSelectionChange(val) {
      this.multipleSelection = val
      this.alldisabled = false
      this.mdisabled = false
      this.notdisabled = false
      if (this.multipleSelection.length === 0) {
        this.notdisabled = true
        this.alldisabled = true
        this.mdisabled = true
      }
    },
    /* 过滤返回评论内容 */
    filterContent(item) {
      return contentToStr(item)
    },
    /* 展示方式 */
    displayMode(displayRule) {
      let str = ''
      switch (displayRule) {
        case 'ALL':
        case 'PUBDISPLAY':
        case 'PUBLIC':
          str = '公开展示'
          break
        case 'PERSONAL':
        case 'HOMEPAGEONLY':
        case 'USERHOME':
          str = '仅主页可见'
          break
        default:
          break
      }
      return str
    },
    showNum(content) {
      this.dialogData.isShow = true
      this.dialogData.content = content
      // console.log(content)
    },
    /* 搜索 */
    toSearch() {
      this.searchParams.pageNum = 1
      this.searchList()
    },
    // 导出
    exportFile() {
      let { startTime, endTime } = this.formInline
      if (!startTime || !endTime) {
        this.$message.warning('请选择创建时间，且不超过30天')
        return
      } else {
        let a = this.moment(endTime)
        let b = this.moment(startTime)
        let days = (a - b) / (1000 * 60 * 60 * 24)
        if (days > 30) {
          this.$message.warning('导出时间不得超过30天')
          return
        }
      }
      this.$confirm('确定导出所有标签聚合内容吗？', '系统提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          //设置loading
          this.$store.commit('setExportLoading', { key: 'tagAgg', value: true })
          let url = downUrl()
          let params = {}
          // 非空判断，只传有值的字段
          Object.keys(this.formInline).forEach((key) => {
            if (this.formInline[key] !== '') {
              params[key] = this.formInline[key]
            }
          })
          delete params.createTime
          this.downFile(
            'get',
            url,
            params,
            '标签聚合内容',
            (message) => {
              this.exportErr(message)
            },
            'tagAgg'
          )
        })
        .catch(() => {})
    },
    /* 导出数据量不超过3万条，超出弹框提示 */
    exportErr(message) {
      this.$confirm(`${message}`, '系统提示', {
        confirmButtonText: '确定',
        showCancelButton: false,
        type: 'warning'
      })
        .then(() => {})
        .catch(() => {})
    }
  }
}
</script>

<style lang="less">
#aggregContent {
  @import url('~@common/style/imgBox.less');
  @import url('~@common/style/clamp.less');
  .text-overflow {
    cursor: pointer;
    .cell {
      /*覆盖引入的公共样式-clamp.less*/
      -webkit-line-clamp: 3;
    }
  }
  .el-table {
    .el-button {
      margin-right: 10px;
    }
    .el-button + .el-button {
      margin-left: 0;
    }
  }
  button.el-button.tag-name {
    white-space: normal;
  }
}
</style>
